<template>
  <div class="content-style" >
    <div
        style="margin-left: -240px;margin-top: 40px"
        class="chart_container"
        ref='echarts_con'>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Bar",
  data(){
    return {}
  },
  mounted() {
    this.queryItemInfo()
  },
  methods: {
    queryItemInfo() {
      var self = this;
      self.$axios.get('/echarts/select2').then((res) => {
        if (res.data.code == 200) {
          this.initEcharts(res.data.data);
        }
      });
    },

    initEcharts(datm) {
      var myChart = echarts.init(this.$refs.echarts_con)
      var option1;
      var xData = []
      var yData = []
      var yData1 = []
      datm.forEach(element =>{
        yData.push(element.count)
        xData.push(element.name)
        yData1.push(element.number)
      })
      option1 = {
        title:{
          text:'成绩展示',
          //标题样式
          textStyle:{
            color: "red",
          },
          //标题边框
          borderWidth:5,
          borderColor:"blue",
          borderRadius: 3,
          //标题位置left,top,right,bottom
          left: 40,
          top: 10,
        },
        tooltip:{

          /**
           * 触发类型：
           *      trigger: "item" 鼠标移到柱子内部触发,展示series中name的值，和对应的姓名及成绩
           *      trigger: "axis" 鼠标只要在该柱子所在中位线上就能触发,展示series中name的值，和对应的姓名及成绩
           */
          trigger: "axis",
          /**
           * 触发时机：
           *      triggerOn: 'click' 点击柱子时，触发类型
           *      triggerOn: 'mousemove' 鼠标放在柱子上时，触发类型
           */
          triggerOn: 'mousemove',
          /**
           * formatter
           *      格式化字符串模板(可以字符串也可以函数)
           *      字符串格式： formatter: "{b}的成绩是{c}"
           *      函数格式：
           */
          formatter: function (arg){
            console.log(arg)
            return '名称:'+arg[0].name+'<br/>数量:'+arg[0].data
          }
        },
        toolbox:{
          feature: {
            // saveAsImage: {},//导出图片
            // dataView:{},//数据视图
            // restore:{},//重置
            // dataZoom:{},//区域缩放
            magicType: {
              type: ["line", "bar"],
              icon: {
                bar:
                    "image://",
                line:
                    "image://"
              },
              title: {
                bar: "柱状图",
                line: "折线图"
              }
            },
          }
        },
        legend:{
          /**
           * 注意legend中data的值要与series中name的值保持一致
           */
          data: ["语文成绩","数学成绩"]
        },
        xAxis:{
          type: 'category',
          data: xData
        },
        yAxis:{
          axisLine:{
            show: true
          },
          type: 'value',
        },

        series: [
          {
            areaStyle:{},
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: "#1786DC"
                  },
                  {
                    offset: 0,
                    color: "#35C9D7"
                  }
                ])
              }
            },
            name: "语文成绩",
            type: 'bar',
            data: yData
          },
          // {
          //   areaStyle:{},
          //   name: "数学成绩",
          //   type: 'bar',
          //   data: yData1
          // }
        ]
      }
      option1 && myChart.setOption(option1);
    },
  }
}
</script>

<style scoped>
.content-style {
  width: 1300px;
  height: 800px;
  position: absolute;
  left: 240px;
}
.chart_container {
  width: 100%;
  height: 90%;
}
</style>
